<template>
  <div class="add_peopled">
      <!-- 头部 -->
      <div class="peopled_top">
        <van-nav-bar title="体检支付页面"  left-arrow> </van-nav-bar>
      </div>
      <!-- 选项 -->
      <div class="peopled_content">
                <div>
                    <div class="peopled1">
                    <div>
                        <input type="radio" style=" margin-right: 20px;" class="radio" name="name1">
                        <span>小一</span>
                    </div>
                    <span>13418480993</span>
                    <div class="update1"><div class="update2"></div></div>
                </div> 
                
            </div>
            <div>
                    <div class="peopled1">
                    <div>
                        <input type="radio" style=" margin-right: 20px;" class="radio" name="name1">
                        <span>小一</span>
                    </div>
                    <span>13418480993</span>
                    <div class="update1"><div class="update2"></div></div>
                </div> 
            </div>
            <div>
                    <div class="peopled3">
                    <div>
                        <input type="radio" style=" margin-right: 20px;" class="radio" name="name1">
                        <span>小一</span>
                    </div>
                    <span>13418480993</span>
                    <div class="update1"><div class="update2"></div></div>
                </div> 
            </div>
            
      </div>
    <div class="base">
        <van-button  plain hairline type="primary">添加体检人</van-button>
    </div>
    <div class="foot">
        <van-button type="primary" block>选择</van-button>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    .add_peopled{
        flex-direction: row-reverse;
    // 添加人头部
        .peopled_top{
        .van-icon::before {
                display: inline-block;
            }
        }
        // 添加人选项
        .peopled_content{
            
            // 单选按钮
            .radio{
                margin-left: 20px;
                margin-top: 20px;
            }
            // 选项
            .peopled1{
                line-height: 50px;
                height: 50px;
                border-bottom: 1px solid gainsboro;
                display: flex;
                justify-content: space-between;
                .update1{
                    width: 70px;
                    margin-top: 5px;
                    // background-color: gold;
                    height: 40px;
                    border-left: 1px solid gray;
                    .update2{
                        width: 30px;
                        height: 30px;
                        background-color: gray;
                        margin:5px 20px;
                        
                    }
                }
            }
             .peopled3{
                line-height: 50px;
                height: 50px;
                // border-bottom: 1px solid gainsboro;
                display: flex;
                justify-content: space-between;
                .update1{
                    width: 70px;
                    margin-top: 5px;
                    // background-color: gold;
                    height: 40px;
                    border-left: 1px solid gray;
                    .update2{
                        width: 30px;
                        height: 30px;
                        background-color: gray;
                        margin:5px 20px;
                        
                    }
                }
            }
        }
        // 添加按钮
       .base{
           margin: 20px;
           height: 100%;
        //    background-color: greenyellow;
           display: flex;
            .van-button {
                
                width: 200PX;
                margin: 0 auto;
                float:center;
            }
       }
       .foot{
           width: 100%;
           position: fixed;
            bottom: 0;
            
       } 
        
        
    }
</style>